<script setup>
import { computed, reactive, ref } from 'vue';

	const gList = reactive([
		'http://159.75.169.224:5500/ComfyUI_00012_.png',
		'/static/images/start/startsmall.png',
		'http://159.75.169.224:5500/ComfyUI_00012_.png',
	])
	const goHome = () =>{
		uni.setStorageSync('launchFlagv1.0', true)
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
	
	let tabIndex = ref(0)
	let toNext = ref(false)
	const changeTab = () => {
		tabIndex.value++
		if(tabIndex.value === gList.length - 1){
			toNext.value = true;
		}
	}	
</script>

<template>
	<view class="gContainer">
		
		<!-- 固定页数的引导页
		 <view class="" v-if="tabIndex === 1">
		 	<image src="/static/images/start/startsmall.png"></image>
		 </view>
		 <view class="" v-else-if="tabIndex === 2">
		 	<image src="http://159.75.169.224:5500/ComfyUI_00012_.png"></image>
		 </view>
		 <view class="" v-else-if="tabIndex === 3">
		 	<image src="/static/images/start/startsmall.png"></image>
		 </view>
		 <up-button type="primary" size="small" text="下一步" @click="next"></up-button>
		 -->
		 
		<swiper @change="changeTab" indicator-dots="true" :autoplay="!toNext" interval="3000">
			<swiper-item v-for="(item, index) in gList" :key="index">
				<image :src="item" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<up-button :disabled="!toNext" type="primary" :plain="true" :hairline="true" text="开始体验" @click="goHome"></up-button>
		<view class="">
			Item:{{tabIndex}}
		</view>
	</view>
</template>


<style lang="scss">
	.gContainer{
		border: 1rpx red solid;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transform: translateZ(0);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.gContainer swiper{
		border: 1rpx red solid;
		width: 80%;
		height: 80%;
	}
</style>
